<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小米手机端</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/vue-router/2.7.0/vue-router.min.js"></script>
    <link rel="stylesheet" type="text/css" href="fontasome/css/font-awesome.min.css">
</head>
<style>
    div,p,ul,li{margin: 0;padding: 0;}
    li{list-style-type: none;}

    footer{position: fixed;bottom: 0;width: 100%}
    footer li{float: left;width: 25%; padding: 10px 0;}
    footer li a.active{color:#ff6600;}
    footer li a{color:#333;text-decoration: none;}
    body{margin: 0;}




    .fl{float: left;}
    .rl{float: right;}
    .clear{clear: both;}
    .acontainer{padding: 0;margin: 0;background-color:#66eeee;width: 100%;height: 600px;overflow: hidden}
    p,div,li,ul{padding: 0;margin: 0;}
    li{list-style: none;}
    a{text-decoration:none;}
    /*头部*/
    .classify_head{height: 50px;width: 100%;overflow: hidden;background-color: #eee;}
    .classify_return{font-size: 30px;color: #ccc;margin-left: 10px;}
    .classify_title{text-align: center;font-size: 17px;  color: #666;  font-weight: 400;width: 325px; }
    .classify_seek{font-size: 20px; margin-top: 16px;margin-right: 5px;color: #ccc;}
    /*身体*/
    .left_classify{width: 22%;overflow: hidden;height: 600px;background-color: #fff;}
    .left_classify_scroll{overflow-y:auto;overflow-x:hidden;width: 95px;height: 100%;}
    .left_classify li{padding: 18px 10px;padding-left: 28px;}
    .left_classify .li_actve{color:red;font-size: 18px;}
    .right_classify{width: 70%;height: 600px;overflow: hidden; background-color: #fff;padding: 0 15px;}
    .right_classify_scroll{overflow-y:auto;overflow-x:hidden;width: 290px;height: 100%;position: relative;}
    .classify_content>img{width: 100%;height: 100%;}
    .classify_content_title{width: 100%;text-align: center;font-size: 15px;clear: both;height: 80px;line-height: 80px;}
    .classify_content_box{width: 100%;height: 210px;}
    .classify_product{float: left;width: 88px;height: 89px;margin:10px 0}
    .classify_product_img{width: 53px;height: 53px;margin-left: 17px;margin-top: 10px; }
    .classify_product_p{text-align: center; margin-top: 4px;color: black;text-decoration:none; }

    .li_box{height: auto;}
</style>
<body>
<div class="view_box">
    <router-view> </router-view>
    <footer style="background-color: #fff">
        <ul>
            <li>
                <router-link to="/index"  active-class="active">首页</router-link>
            </li>
            <li>
                <router-link to="/cate"  active-class="active">分类</router-link>
            </li>
            <li>
                <router-link to="/cart"  active-class="active">购物车</router-link>
            </li>
            <li>
                <router-link to="/my"  active-class="active">我的</router-link>
            </li>
        </ul>
    </footer>
</div>

<template id="index_view">
    <div>首页</div>
</template>
<template  id="cate_view">
    <div class="acontainer">
        <!--头部-->
        <div class="classify_head">
            <div class="fl" style="margin-top: 7px;"><a href="" class="classify_return">  <  </a></div>
            <div class="fl"><h2 class="classify_title">商品分类</h2></div>
            <div class="fl"><a href="" class="classify_seek fa fa-search"></a></div>
        </div>
        <!--身体-->
        <div class="classify_content">
            <div class="left_classify fl" id="left_classify">
                <ul class="left_classify_scroll" >
                    <li v-for="(item,index) in items" @click="check(index)" :class="{'li_actve':index==cur_item}" >{{item}}</li>
                </ul>
            </div>
            <div class="right_classify rl" id="right_classify">
                <ul class="right_classify_scroll" v-on:scroll="test()">
                  <li  class="li_box" >
                        <div class="classify_content">
                            <img src="https://i8.mifile.cn/v1/a1/4708f365-4b7a-aecd-680f-990d91981e6f!500x200.webp?bg=C9AAA8" alt="">
                            <div class="classify_content_title">
                                <span style="font-size: 24px;color: #eee;">—</span>
                                <span>我是新品</span>
                                <span style="font-size: 24px;color: #eee;">—</span>
                            </div>
                            <div class="classify_content_box">
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img"
                                             src="https://i8.mifile.cn/b2c-mimall-media/95e18c104b398643101805287a00ad2b.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">小米mx2</p>
                                    </a>
                                </div>
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img" src="https://i8.mifile.cn/b2c-mimall-media/7bb843bdb8e1f61f4567f1e2acb43262.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">小米note 3</p>
                                    </a>
                                </div>
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img" src="https://i8.mifile.cn/b2c-mimall-media/f0e283f74845939fd24d53f7fb1d35c1.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">小米6</p>
                                    </a>
                                </div>
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img" src="https://i8.mifile.cn/b2c-mimall-media/f50a66098acdec2fa16e5d30a7f50769.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">小米5x2</p>
                                    </a>
                                </div>
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img" src="https://i8.mifile.cn/b2c-mimall-media/88bc9af6c3bd4e7a695060fe628971e8.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">小米max 2</p>
                                    </a>
                                </div>
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img" src="https://i8.mifile.cn/b2c-mimall-media/e72c32611dd54e71d3579eeee2266c81.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">米mx2</p>
                                    </a>
                                </div>
                            </div>
                            <div class="classify_content_title">
                                <span style="font-size: 24px;color: #eee;">—</span>
                                <span>电视</span>
                                <span style="font-size: 24px;color: #eee;">—</span>
                            </div>
                            <div class="classify_content_box">
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img"
                                             src="https://i8.mifile.cn/b2c-mimall-media/0ceafb0119fb20b519f422240ff7bdb0.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">32英寸</p>
                                    </a>
                                </div>
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img" src="https://i8.mifile.cn/b2c-mimall-media/efb682b76a29411fd26d990971992c3e.png?width=120&height=120" alt="">
                                        <p class="classify_product_p"> 3英寸</p>
                                    </a>
                                </div>
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img" src="https://i8.mifile.cn/b2c-mimall-media/a68d31ccb3ac07f289abc39a5682f334.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">6英寸</p>
                                    </a>
                                </div>
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img" src="https://i8.mifile.cn/b2c-mimall-media/068cd93230bb3d93c80f42b0dba6d5f4.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">65英寸</p>
                                    </a>
                                </div>

                            </div>
                            <div class="classify_content_title">
                                <span style="font-size: 24px;color: #eee;">—</span>
                                <span>电视</span>
                                <span style="font-size: 24px;color: #eee;">—</span>
                            </div>
                            <div class="classify_content_box">
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img"
                                             src="https://i8.mifile.cn/b2c-mimall-media/e86a2f01f65b88869b78f2c54cc7f258.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">笔记本123456</p>
                                    </a>
                                </div>
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img" src="https://i8.mifile.cn/b2c-mimall-media/f0d7f8167e14f0c70fd84aa6cb321cb6.png?width=120&height=120" alt="">
                                        <p class="classify_product_p"> 笔记本654321</p>
                                    </a>
                                </div>

                            </div>

                        </div>
                    </li>
                    <li class="li_box">
                        <div class="classify_content">
                            <img src="https://i8.mifile.cn/v1/a1/4708f365-4b7a-aecd-680f-990d91981e6f!500x200.webp?bg=C9AAA8" alt="">
                            <div class="classify_content_title">
                                <span style="font-size: 24px;color: #eee;">—</span>
                                <span>我是手机</span>
                                <span style="font-size: 24px;color: #eee;">—</span>
                            </div>
                            <div class="classify_content_box">
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img"
                                             src="https://i8.mifile.cn/b2c-mimall-media/95e18c104b398643101805287a00ad2b.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">小米mx2</p>
                                    </a>
                                </div>
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img" src="https://i8.mifile.cn/b2c-mimall-media/7bb843bdb8e1f61f4567f1e2acb43262.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">小米note 3</p>
                                    </a>
                                </div>
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img" src="https://i8.mifile.cn/b2c-mimall-media/f0e283f74845939fd24d53f7fb1d35c1.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">小米6</p>
                                    </a>
                                </div>
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img" src="https://i8.mifile.cn/b2c-mimall-media/f50a66098acdec2fa16e5d30a7f50769.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">小米5x2</p>
                                    </a>
                                </div>
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img" src="https://i8.mifile.cn/b2c-mimall-media/88bc9af6c3bd4e7a695060fe628971e8.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">小米max 2</p>
                                    </a>
                                </div>
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img" src="https://i8.mifile.cn/b2c-mimall-media/e72c32611dd54e71d3579eeee2266c81.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">米mx2</p>
                                    </a>
                                </div>
                            </div>
                            <div class="classify_content_title">
                                <span style="font-size: 24px;color: #eee;">—</span>
                                <span>电视</span>
                                <span style="font-size: 24px;color: #eee;">—</span>
                            </div>
                            <div class="classify_content_box">
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img"
                                             src="https://i8.mifile.cn/b2c-mimall-media/0ceafb0119fb20b519f422240ff7bdb0.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">32英寸</p>
                                    </a>
                                </div>
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img" src="https://i8.mifile.cn/b2c-mimall-media/efb682b76a29411fd26d990971992c3e.png?width=120&height=120" alt="">
                                        <p class="classify_product_p"> 3英寸</p>
                                    </a>
                                </div>
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img" src="https://i8.mifile.cn/b2c-mimall-media/a68d31ccb3ac07f289abc39a5682f334.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">6英寸</p>
                                    </a>
                                </div>
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img" src="https://i8.mifile.cn/b2c-mimall-media/068cd93230bb3d93c80f42b0dba6d5f4.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">65英寸</p>
                                    </a>
                                </div>
                                <div class="classify_product"></div>
                                <div class="classify_product"></div>
                            </div>
                            <div class="classify_content_title">
                                <span style="font-size: 24px;color: #eee;">—</span>
                                <span>电视</span>
                                <span style="font-size: 24px;color: #eee;">—</span>
                            </div>
                            <div class="classify_content_box">
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img"
                                             src="https://i8.mifile.cn/b2c-mimall-media/e86a2f01f65b88869b78f2c54cc7f258.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">笔记本123456</p>
                                    </a>
                                </div>
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img" src="https://i8.mifile.cn/b2c-mimall-media/f0d7f8167e14f0c70fd84aa6cb321cb6.png?width=120&height=120" alt="">
                                        <p class="classify_product_p"> 笔记本654321</p>
                                    </a>
                                </div>
                            </div>

                        </div>
                    </li>
                    <li class="li_box">
                        <div class="classify_content">
                            <img src="https://i8.mifile.cn/v1/a1/4708f365-4b7a-aecd-680f-990d91981e6f!500x200.webp?bg=C9AAA8" alt="">
                            <div class="classify_content_title">
                                <span style="font-size: 24px;color: #eee;">—</span>
                                <span>我是电视</span>
                                <span style="font-size: 24px;color: #eee;">—</span>
                            </div>
                            <div class="classify_content_box">
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img"
                                             src="https://i8.mifile.cn/b2c-mimall-media/95e18c104b398643101805287a00ad2b.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">小米mx2</p>
                                    </a>
                                </div>
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img" src="https://i8.mifile.cn/b2c-mimall-media/7bb843bdb8e1f61f4567f1e2acb43262.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">小米note 3</p>
                                    </a>
                                </div>
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img" src="https://i8.mifile.cn/b2c-mimall-media/f0e283f74845939fd24d53f7fb1d35c1.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">小米6</p>
                                    </a>
                                </div>
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img" src="https://i8.mifile.cn/b2c-mimall-media/f50a66098acdec2fa16e5d30a7f50769.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">小米5x2</p>
                                    </a>
                                </div>
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img" src="https://i8.mifile.cn/b2c-mimall-media/88bc9af6c3bd4e7a695060fe628971e8.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">小米max 2</p>
                                    </a>
                                </div>
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img" src="https://i8.mifile.cn/b2c-mimall-media/e72c32611dd54e71d3579eeee2266c81.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">米mx2</p>
                                    </a>
                                </div>
                            </div>
                            <div class="classify_content_title">
                                <span style="font-size: 24px;color: #eee;">—</span>
                                <span>电视</span>
                                <span style="font-size: 24px;color: #eee;">—</span>
                            </div>
                            <div class="classify_content_box">
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img"
                                             src="https://i8.mifile.cn/b2c-mimall-media/0ceafb0119fb20b519f422240ff7bdb0.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">32英寸</p>
                                    </a>
                                </div>
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img" src="https://i8.mifile.cn/b2c-mimall-media/efb682b76a29411fd26d990971992c3e.png?width=120&height=120" alt="">
                                        <p class="classify_product_p"> 3英寸</p>
                                    </a>
                                </div>
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img" src="https://i8.mifile.cn/b2c-mimall-media/a68d31ccb3ac07f289abc39a5682f334.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">6英寸</p>
                                    </a>
                                </div>
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img" src="https://i8.mifile.cn/b2c-mimall-media/068cd93230bb3d93c80f42b0dba6d5f4.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">65英寸</p>
                                    </a>
                                </div>
                                <div class="classify_product"></div>
                                <div class="classify_product"></div>
                            </div>
                            <div class="classify_content_title">
                                <span style="font-size: 24px;color: #eee;">—</span>
                                <span>电视</span>
                                <span style="font-size: 24px;color: #eee;">—</span>
                            </div>
                            <div class="classify_content_box">
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img"
                                             src="https://i8.mifile.cn/b2c-mimall-media/e86a2f01f65b88869b78f2c54cc7f258.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">笔记本123456</p>
                                    </a>
                                </div>
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img" src="https://i8.mifile.cn/b2c-mimall-media/f0d7f8167e14f0c70fd84aa6cb321cb6.png?width=120&height=120" alt="">
                                        <p class="classify_product_p"> 笔记本654321</p>
                                    </a>
                                </div>
                            </div>

                        </div>
                    </li>
                    <li class="li_box">
                        <div class="classify_content">
                            <img src="https://i8.mifile.cn/v1/a1/4708f365-4b7a-aecd-680f-990d91981e6f!500x200.webp?bg=C9AAA8" alt="">
                            <div class="classify_content_title">
                                <span style="font-size: 24px;color: #eee;">—</span>
                                <span>我是电脑</span>
                                <span style="font-size: 24px;color: #eee;">—</span>
                            </div>
                            <div class="classify_content_box">
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img"
                                             src="https://i8.mifile.cn/b2c-mimall-media/95e18c104b398643101805287a00ad2b.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">小米mx2</p>
                                    </a>
                                </div>
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img" src="https://i8.mifile.cn/b2c-mimall-media/7bb843bdb8e1f61f4567f1e2acb43262.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">小米note 3</p>
                                    </a>
                                </div>
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img" src="https://i8.mifile.cn/b2c-mimall-media/f0e283f74845939fd24d53f7fb1d35c1.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">小米6</p>
                                    </a>
                                </div>
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img" src="https://i8.mifile.cn/b2c-mimall-media/f50a66098acdec2fa16e5d30a7f50769.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">小米5x2</p>
                                    </a>
                                </div>
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img" src="https://i8.mifile.cn/b2c-mimall-media/88bc9af6c3bd4e7a695060fe628971e8.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">小米max 2</p>
                                    </a>
                                </div>
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img" src="https://i8.mifile.cn/b2c-mimall-media/e72c32611dd54e71d3579eeee2266c81.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">米mx2</p>
                                    </a>
                                </div>
                            </div>
                            <div class="classify_content_title">
                                <span style="font-size: 24px;color: #eee;">—</span>
                                <span>电视</span>
                                <span style="font-size: 24px;color: #eee;">—</span>
                            </div>
                            <div class="classify_content_box">
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img"
                                             src="https://i8.mifile.cn/b2c-mimall-media/0ceafb0119fb20b519f422240ff7bdb0.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">32英寸</p>
                                    </a>
                                </div>
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img" src="https://i8.mifile.cn/b2c-mimall-media/efb682b76a29411fd26d990971992c3e.png?width=120&height=120" alt="">
                                        <p class="classify_product_p"> 3英寸</p>
                                    </a>
                                </div>
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img" src="https://i8.mifile.cn/b2c-mimall-media/a68d31ccb3ac07f289abc39a5682f334.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">6英寸</p>
                                    </a>
                                </div>
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img" src="https://i8.mifile.cn/b2c-mimall-media/068cd93230bb3d93c80f42b0dba6d5f4.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">65英寸</p>
                                    </a>
                                </div>
                                <div class="classify_product"></div>
                                <div class="classify_product"></div>
                            </div>
                            <div class="classify_content_title">
                                <span style="font-size: 24px;color: #eee;">—</span>
                                <span>电视</span>
                                <span style="font-size: 24px;color: #eee;">—</span>
                            </div>
                            <div class="classify_content_box">
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img"
                                             src="https://i8.mifile.cn/b2c-mimall-media/e86a2f01f65b88869b78f2c54cc7f258.png?width=120&height=120" alt="">
                                        <p class="classify_product_p">笔记本123456</p>
                                    </a>
                                </div>
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img" src="https://i8.mifile.cn/b2c-mimall-media/f0d7f8167e14f0c70fd84aa6cb321cb6.png?width=120&height=120" alt="">
                                        <p class="classify_product_p"> 笔记本654321</p>
                                    </a>
                                </div>
                            </div>

                        </div>
                    </li>
                    <li class="li_box"></li>
                    <li class="li_box"></li>
                    <li class="li_box"></li>
                    <li class="li_box"></li>
                    <li class="li_box"></li>
                    <li class="li_box"></li>
                    <li class="li_box"></li>
                    <li class="li_box"></li>
                    <li class="li_box"></li>
                 <!--    <li v-for="info in goods_list" class="li_box">
                        <div class="classify_content">
                            <img src="https://i8.mifile.cn/v1/a1/4708f365-4b7a-aecd-680f-990d91981e6f!500x200.webp?bg=C9AAA8" alt="">
                            <div class="classify_content_title">
                                <span style="font-size: 24px;color: #eee;">—</span>
                                <span>我是分割线</span>
                                <span style="font-size: 24px;color: #eee;">—</span>
                            </div>
                            <div class="classify_content_box">
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img"
                                             :src="info.goods_img" alt="">
                                        <p class="classify_product_p">{{info.goods_name}}</p>
                                    </a>
                                </div>
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img"
                                             :src="info.goods_img" alt="">
                                        <p class="classify_product_p">{{info.goods_name}}</p>
                                    </a>
                                </div>
                                <div class="classify_product">
                                    <a href="">
                                        <img class="classify_product_img"
                                             :src="info.goods_img" alt="">
                                        <p class="classify_product_p">{{info.goods_name}}</p>
                                    </a>
                                </div>
                            </div>
                        </div>
                    </li> -->
                    
                </ul>
            </div>
            <!--底部-->
        </div>
        <div class="classify_footer"></div>
    </div>
</template>
<template id="cart_view">
    <div>购物车</div>
</template>
<template id="my_view">
    <div>我的</div>
</template>
<script type="text/javascript">
    var router = new VueRouter({
        routes:[{
            path:'/index',
            component:{
                template:'#index_view'
            }
        },{
            path:'/cate',
            component:{
                template:'#cate_view' ,
                data(){
                    return{
                        cur_item:'',
                        items:[],
                        goods_list:[],
                        li_height:[],
                    }
                },
                methods:{
                    test:function () {
                        var scrollh = window.event.srcElement.scrollTop
                        var right = document.getElementsByClassName("right_classify")[0]
                        var left = document.getElementsByClassName("left_classify")[0]
                        if(scrollh>50){
                            left.style.position="fixed"
                            left.style.top="0"
                            right.style.position="fixed"
                            right.style.top="0"
                            right.style.left="23%"
                            left.style.height="600px"
                        }else {
                            left.style.position="relatice"
                            left.style.top="50px"
                            right.style.position="relatice"
                            right.style.top="50px"
                            left.style.height="600px"
                        }
                        //随滚动点亮文字
                        let flag=document.getElementsByClassName("right_classify_scroll")[0].getElementsByTagName("li").length
                        this.cur_item=0
                        for(let t=0;t<flag;t++){
                            if(this.li_height[t]<=scrollh){
                                this.cur_item++
                                console.log(this.cur_item)
                            }
                        }


                    },
                    check:function (index) {
                        var h=0
                        for(var i=0;i<index;i++){
                                h=this.li_height[i]
                        }
                        console.log(this.cur_item)
                        this.cur_item=index

                        document.getElementsByClassName("right_classify_scroll")[0].scrollTop=h
                    }
                },
                created(){
                    this.items = this.$parent.item
                    this.cur_item = this.$parent.cur_item
                    this.li_height = this.$parent.li_height
                    this.goods_list = JSON.parse(localStorage.getItem('goods_list'))

                },
                mounted(){
                    var aaa=0
                    let flag=document.getElementsByClassName("right_classify_scroll")[0].getElementsByTagName("li").length
                    for(var i=0;i<flag;i++){
                        aaa=document.getElementsByClassName("li_box")[i].offsetHeight+aaa+101
                        this.li_height.push(aaa)
                    }
                }
            }

        },{
            path:'/cart',
            component:{
                template:'#cart_view'
            }
        },{
            path:'/my',
            component:{
                template:'#my_view'
            }
        }]
    })

    new Vue({
        el:'.view_box',
        router,

        data:{
            cur_item:"0",
            item:[],
            goods_list:[],
            li_height:[],
        },
        created(){
           this.item=["新品","手机","电视","电脑","家电","路由","智能","电源","耳机","音响","礼品","生活","米粉卡","零售店"]
            this.goods_list = JSON.parse(localStorage.getItem('goods_list'))


        },


    })
/*    $(document).ready(function(){
        $(".right_classify ul").scroll(function(){
            var scroH = $(this).scrollTop();
            console.log(scroH);
            if(scroH>50){
                $('#left_classify').css({"position":"fixed","top":0})
                $('#right_classify').css({"position":"fixed","top":0,"left":"97px"})
            }else{
                $('#left_classify').css({"position":"relative","top":0})
                $('#right_classify').css({"position":"relative","top":0,"left":"0px"})
            }
        })
    })*/
</script>
</body>
</html>